<template>
<div class="page-wrapper">
  <div class="page-wrapper__body is-list">
  <div class="page-container">
    <div class="grid-container">
      <el-row :gutter="20" class="grid-table-tool">
        <el-col :span="16" class="tool-action">
          <el-input v-model="params.key" placeholder="请输入关键词,例如:姓名/电话" @keyup.enter="onSearch" class="search-box">
          </el-input>
          <tree-select v-model="params.deptId" placeholder="请选择部门" :options="deptTreeData" class="dept-tree-select" />
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-col>
        <el-col :span="8" class="tool-pagination">
          <el-button type="primary" plain icon="el-icon-plus" @click="onEdit">新增</el-button>
        </el-col>
      </el-row>
      <el-table border class="grid-table" :data="resp.dataList" v-loading="isLoading" width="100%">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" ></el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center" width="120px"></el-table-column>
        <el-table-column prop="departName" label="所属部门" align="center" ></el-table-column>
        <el-table-column prop="username" label="登录名" align="center"></el-table-column>
        <el-table-column prop="roleName" label="角色" align="center" min-width="200px">
          <template slot-scope="scope">
            <div v-if="baseUtil.isNotBlank(scope.row.roleName)">
              <el-tag size="mini" :type="itemIndex%2==0?'success':(itemIndex%3==0?'danger':'default')" v-for="(item,itemIndex) in scope.row.roleName.split(',')" :key="itemIndex" style="margin-right:5px;">{{item}}</el-tag>
            </div>
            <div v-else> -- </div>
          </template>
        </el-table-column>
        <el-table-column prop="isEnable" label="启用状态" align="center" width="80px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" @change="changeEnable(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center" width="240">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row.id)" type="primary" plain size="small">详情</el-button>
            <el-popover placement="top" width="160" v-model="scope.row.resetVisible">
              <p style="line-height: 30px;">确定重置密码？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" round @click="scope.row.resetVisible = false">取消</el-button>
                <el-button type="primary" size="mini" round @click="onResetPassword(scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" type="primary" plain size="small" style="margin-left:7px;">重置密码</el-button>
            </el-popover>
            <el-popover placement="top" width="160" v-model="scope.row.deleteVisible" v-if="!scope.row.isAdmin">
              <p style="line-height: 30px;">确认删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" round @click="scope.row.deleteVisible = false">取消</el-button>
                <el-button type="primary" size="mini" round @click="deletedUser(scope.row.id)">确定</el-button>
              </div>
              <el-button slot="reference" type="danger" plain size="small" style="margin-left:7px;">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="grid-table-tool">
        <el-col :span="12" class="tool-action">&nbsp;</el-col>
        <el-col :span="12" class="tool-pagination">
          <el-pagination background v-if="resp.total>params.pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="params.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="resp.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
  </div>
</div>
</template>

<script>
  import {findList,isEnableOne ,resetPassword, deleted} from "../../api/adminUser";
  import { findAllList as findDepartmentList} from "../../api/department";
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    components:{TreeSelect},
    data(){
      return{
        resp:{
          dataList:[],
          total:0
        },
        params:{
          key: '',
          deptId:null,
          sort: '',
          order: '',
          page: 1,
          pageSize: 10,
        },
        isLoading:false,
        departmentList:[],
        deptTreeData:[]


      }
    },
    methods:{
      changeEnable(row){
        let dialogMsg = row.isEnable == 1 ?  '确认启用？':'确认禁用？';
        this.$confirm(dialogMsg, '确认信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.changeEnableStatus(row);
        }).catch(() => {
          row.isEnable = row.isEnable==1?0:1;
        });

      },
      async changeEnableStatus(row){ // 启用 禁用 修改
        let enableStatus = {id:row.id ,isEnable:row.isEnable };
        let resp = await isEnableOne(enableStatus);
        let dialogMsg = row.isEnable == 1 ?  '已启用':'已禁用';
        if(this.qUtil.validResp(resp)){
          this.$message({type: 'success', message: dialogMsg , showClose: true});
          this.loadData();
        }
      },
      async deletedUser(id){
        let resp = await deleted(id);
        if(!this.qUtil.validResp(resp)){
          this.$message({type: 'error', message: '删除失败!', showClose: true});
          return false;
        }
        this.$message({type: 'success', message: '删除成功!', showClose: true});
        if(this.resp.dataList.length===1 && this.params.page>1){
          this.params.page--;
        }
        this.loadData();
      },

      onSearch(){
        this.params.page = 1;
        this.loadData();
      },
      handleSizeChange(val) {
        this.params.pageSize = val;
        this.onSearch();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.loadData();
      },
      async onResetPassword(row){
        this.isLoading = true;
        let resp = await resetPassword(row.id);
        this.isLoading = false;
        if(!this.qUtil.validResp(resp)){
          this.$message({type: 'error', message: '密码重置失败!', showClose: true});
          return false;
        }
        this.$message({type: 'success', message: '密码重置成功!', showClose: true});
      },
      onEdit(id){
        id = this.baseUtil.isBlank(id) ? 0 :id ;
        this.$router.push({ path: '/adminUserDetail', query: { id:id}})
      },

      async loadData(){
        this.isLoading = true;
        let resp = await findList(this.params);
        this.isLoading = false;
        if(!this.qUtil.validResp(resp)){
          this.$message({type: 'error', message: '数据加载失败!', showClose: true});
          return false;
        }
        this.resp.dataList = resp.data.dataList;
        this.resp.total = resp.data.total;
      },
      async loadDeptData(){
        let treeData = [];
        let deptResp = await findDepartmentList();
        if(this.qUtil.validResp(deptResp)) {
          this.departmentList = deptResp.data.dataList;
          treeData = this.departmentList.filter(m=>m.parentId == 0);
          this.handleList(this.departmentList ,treeData);
        }
        this.deptTreeData = treeData;
      },
      handleList(data,result){
        if(result.length>0) {
          result.map(m => {
            m.label = m.name;
            m.children = data.filter(c => c.parentId == m.id);
            this.handleList(data, m.children)
          })
        }

      },

    },


    mounted(){
      this.loadDeptData();
      this.loadData();

    }
  }
</script>
<style scoped>
  .search-box{
    float: left;
    width:300px;margin-right:10px;
  }
  .dept-tree-select{
    float: left;
    margin:0 10px 0;
    width:300px !important;
  }
</style>